<template>
  <div :class="styles['drawer-info']">
    <template v-for="uItem in infoList">
      <ul :key="uItem.prop" v-if="uItem.hidden">
        <li v-for="lItem in uItem.list" :key="lItem.prop">
          <span>{{ lItem.label }} :</span>
          <span>{{ state[lItem.prop] }}</span>
        </li>
      </ul>
    </template>
    <div v-if="orderList.hidden">
      <p>{{ orderList.label }} :</p>
      <ul :class="[styles['card-list'], 'ato-scroll-bar']">
        <li v-for="item in state[orderList.prop]" :key="item" class="ato-pl-12">{{ item.orderNo }}</li>
      </ul>
    </div>
  </div>
  <hr class="ato-mt-12 ato-mb-12"/>
</template>

<script setup name="DrawerInfo">
import {computed} from 'vue'

// 传入ulProps对应props显示ul
const props = defineProps({
  ulProps: {
    type: Array,
    required: true
  },
  state: {
    type: Object,
    required: true
  },
  isVip: {
    type: Boolean,
    default: false
  }
})

const isRenderDom = (prop) => {
  return props.ulProps.includes(prop)
}

const infoList = [
  {
    prop: 'logistics', // 物流信息
    hidden: isRenderDom('logistics'),
    list: [
      { label: '物流公司', prop: 'logisticsCompany' },
      { label: '物流单号', prop: 'trackingNo' },
      { label: '签收时间', prop: 'signTime' }
    ]
  },
  {
    prop: 'sendCard', // 送卡信息
    hidden: isRenderDom('sendCard'),
    list: [
      { label: '送卡人', prop: 'sendPerson' },
      { label: '送卡人UID', prop: 'sendUid' },
      { label: '送卡人电话', prop: 'sendPhone' }
    ]
  },
  {
    prop: 'mail', // 寄件
    hidden: isRenderDom('mail'),
    list: [
      { label: '寄件人', prop: 'mailName' },
      { label: '寄件人UID', prop: 'mailUID' },
      { label: '寄件人电话', prop: 'mailIphone' }
    ]
  },
  {
    prop: 'firstTrial', // 初审信息
    hidden: isRenderDom('firstTrial'),
    list: [
      { label: '初审通过卡牌数', prop: 'firstReviewPass' },
      { label: '初审不通过卡牌数', prop: 'firstReviewMiss' },
      { label: '初审人', prop: 'firstReviewName' },
      { label: '初审时间', prop: 'firstReviewTime' }
    ]
  },
  {
    prop: 'review', // 复核信息
    hidden: isRenderDom('review'),
    list: [
      { label: '复核通过卡牌数', prop: 'reviewPass' },
      { label: '复核不通过卡牌数', prop: 'reviewMiss' },
      { label: '复核人', prop: 'reviewName' },
      { label: '复核时间', prop: 'reviewTime' }
    ]
  },
  {
    prop: 'enter', // 入库信息
    hidden: isRenderDom('enter'),
    list: [
      { label: '入库人员', prop: 'enterName' },
      { label: '入库时间', prop: 'enterTime' }
    ]
  }
]

const orderList = computed(() => {
  return {
    label: props.isVip ? 'VIP订单' : '同批次签收的送卡订单', prop: 'orderInfos', hidden: isRenderDom('orderList')
  }
})

</script>

<style module="styles" lang="less" src="./index.less"></style>
